<template>
  <div class="bg-white pt-5 px-5 rounded-md content box-border">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/system/user' }"
        >用户管理</el-breadcrumb-item
      >
    </el-breadcrumb>
    <el-divider />
    <div class="flex w-full justify-between box-border">
      <el-form :inline="true" :model="searchParams">
        <el-form-item label="登录账号" class="w-56">
          <el-input
            v-model="searchParams.username"
            placeholder="请输入登录账号"
            clearable
          />
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader
            v-model="searchParams.deptIds"
            class="dept-casc"
            :options="deptList"
            :props="deptprops"
            clearable
            collapse-tags
            filterable
            placeholder="请选择部门"
          />
        </el-form-item>
        <el-form-item label="用户角色" class="w-56">
          <el-input
            v-model="searchParams.roleName"
            placeholder="请输入用户角色"
            clearable
          />
        </el-form-item>
        <el-form-item label="用户状态" class="w-48">
          <el-select
            v-model="searchParams.available"
            clearable
            placeholder="选择状态"
          >
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onClearSearch">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-container class="mt-4">
      <el-table
        :data="tableData.records"
        :header-cell-style="{ background: '#F4F4F4', color: '#000' }"
        border
        style="width: 100%"
      >
        <el-table-column prop="username" :align="'center'" label="登录账户" />
        <el-table-column prop="department" :align="'center'" label="部门" />
        <el-table-column prop="roleName" :align="'center'" label="用户角色" />
        <el-table-column prop="available" :align="'center'" label="用户状态">
          <template #default="scope">
            <div>{{ scope.row.available === 1 ? '启用' : '禁用' }}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
    <div class="flex mt-4 w-full justify-end">
      <el-pagination
        v-show="tableData.total > 0"
        :current-page="searchParams.pageNum"
        :page-size="searchParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive } from 'vue';
  import { apiUserPageList } from '@/http/system/user';
  import { IDeptTreeItem } from '@/http/system/department/type';
  import { apiTreeList } from '@/http/system/department';
  // import { ElMessageBox } from 'element-plus';
  const searchParams = reactive({
    username: '',
    status: '',
    deptIds: [],
    roleName: '',
    available: '',
    pageNum: 1,
    pageSize: 10,
  });
  onMounted(() => {
    // getTreeList();
    // getTableData();
  });
  const deptprops = {
    multiple: true,
    checkStrictly: true,
    emitPath: false,
    value: 'departmentId',
    label: 'name',
    children: 'child',
  };
  let deptList = reactive<IDeptTreeItem[]>([]);
  const tableData = reactive({
    records: [],
    total: 0,
    current: 1,
  });
  //分页size修改
  const handleSizeChange = (val: number): void => {
    searchParams.pageNum = 1;
    searchParams.pageSize = val;
    getTableData();
  };
  //分页-页数点击
  const handleCurrentChange = (val: number): void => {
    searchParams.pageNum = val;
    getTableData();
  };
  // 部门树列表
  // const getTreeList = async () => {
  //   const res = await apiTreeList();
  //   if (res && res.length) {
  //     deptList.push(...res);
  //   }
  // };
  //获取表格数据
  const getTableData = async (): Promise<void> => {
    const res = await apiUserPageList(searchParams);
    Object.assign(tableData, res);
  };

  const onQuery = (): void => {
    searchParams.pageNum = 1;
    getTableData();
  };
  //清空筛选
  const onClearSearch = (): void => {
    searchParams.username = '';
    searchParams.status = '';
    searchParams.deptIds = [];
    searchParams.roleName = '';
    searchParams.available = '';
    searchParams.pageNum = 1;
    searchParams.pageSize = 10;
    getTableData();
  };
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
    min-height: 100vh;
    :deep {
      .dept-casc {
        width: 300px;
        // height: 34px;
        // overflow: hidden;
        .el-cascader__tags {
          .el-tag {
            .el-tag__content {
              line-height: 2;
            }
          }
        }
      }
    }
  }
</style>
